<template>
	<div class="app-header">
		<el-menu class="app-header-menu" router mode="horizontal" :default-active="activeIndex" @select="handleSelect">
			<el-menu-item index="/">
				Home
			</el-menu-item>

			<el-submenu index="/matches">
				<template slot="title">Match Infomation</template>
				<el-menu-item index="/match/season/1">Season One</el-menu-item>
				<el-menu-item index="/match/season/2">Season Two</el-menu-item>
				<el-menu-item index="/match/season/3">Season Three</el-menu-item>
			</el-submenu>

			<el-menu-item index="/about">
				About Us
			</el-menu-item>

			<el-menu-item index="/match/season/3/week/6">
				Test
			</el-menu-item>
		</el-menu>
	</div>
</template>

<script>
	export default {
		name: 'app-header',
		data () {
			return {
				activeIndex: this.$route.path // active menu depends on current route path.
			};
		},
		methods: {
			handleSelect: function (key, keyPath) {
				// TODO:
				console.log(key, keyPath);
			}
		}
	}
</script>

<style>
	.app-header {
	    margin-bottom: 1.5rem;
	}
</style>